<template>
  <div style="margin-top:40px">
    <div>
      <a-divider>推荐产品</a-divider>
    </div>
    <div class="index-product-list">
      <a-list
        :grid="{ gutter: 20, column: 4 }"
        size="large"
        :data-source="listData"
      >
        <a-list-item slot="renderItem" key="item.title" slot-scope="item">
            <a-card hoverable style="width: 100%" :bordered="false">
                <img
                slot="cover"
                alt="example"
                src="https://img-opp.yjgyl.com.cn/goods/1630493956103.png!s750"
                />
                <a-card-meta :title="item.title">
                    <template slot="description" :style="{size:'100px'}">
                        三种型号可选, 一件定制
                    </template>
                </a-card-meta>
                <a-row>
                  <a-col :span="7" :offset="2">
                    <a-icon type="eye" /> 288
                  </a-col>
                  <a-col :span="7">
                    <a-icon type="like" /> 81
                  </a-col>
                  <a-col :span="7">
                    <a-icon type="message" /> 8
                  </a-col>
                </a-row>
                <a-divider :style="{margin:'10px 0'}"></a-divider>

                <a-row class="pro-card-footer">
                  <a-col :span="16"  offset="1" class="nickname">
                  <a-avatar :src="item.avatar" size="small" />
                    多啦没有梦
                  </a-col>
                  <a-col :span="6" class="location">
                    <a-icon type="environment" /> 江苏南京
                  </a-col>
                </a-row>
                
                <!-- <template slot="actions" class="ant-card-actions">
                    <span> <a-avatar slot="avatar" :src="item.avatar" /></span>
                    <span> <a-icon key="star-o" type="star-o" /> 123</span>
                    <span><a-icon key="like-o" type="like-o" /> 88</span>
                </template> -->
               
            </a-card>
        
          <!-- <img
            width="100%"
            alt="logo"
            src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
          />
          <a-list-item-meta :description="item.description">
            <a-avatar slot="avatar" :src="item.avatar" />
            <a slot="title" :href="item.href">{{ item.title }}</a>
          </a-list-item-meta>
           
          <template v-for="{ type, text } in actions" slot="actions">
            <span :key="type">
              <a-icon :type="type" style="margin-right: 8px" />
              {{ text }}
            </span>
          </template> -->
        </a-list-item>
      </a-list>
    </div>
  </div>
</template>
<script>
const listData = [];
for (let i = 0; i < 23; i++) {
  listData.push({
    href: "https://www.antdv.com/",
    title: `漫画 / 得,未曾有 ${i}`,
    avatar: "https://img.zcool.cn/community/01b4555cc27c4ea8012141689fe263.jpg@80w_80h_1c_1e_1o_100sh.jpg",
    description: "资深产品经理, 10年文创定制从业经验",
  });
}

export default {
  data() {
    return {
      listData,
      actions: [
        { type: "star-o", text: "156" },
        { type: "like-o", text: "156" },
        { type: "message", text: "2" },
      ],
    };
  },
};
</script>
<style>
    .index-product-list .ant-card-body {
        padding: 0;
    }
    .index-product-list .ant-card-meta-detail{
        padding: 10px;
        text-align: left;
    }
    .index-product-list .ant-card-meta-title { 
        font-size: 14px;
        color: #333333;
        font-weight: normal;
    }
    .index-product-list .ant-card-meta-description{ 
        font-size: 12px;
        margin-top: -5px;
        margin-bottom: 10px;
    }
    .pro-card-footer{
        margin-bottom: 10px;
        line-height: 24px;
        font-size: 12px;
        vertical-align:middle;
    }
    .pro-card-footer .nickname{
        color: #333333;
        text-align: left;
    }
</style>
